<template>
	<sw-common-frame :count="dataCount" :loading="loading">
		<template slot="button">
			<el-button size="small" type="primary" icon="el-icon-plus" @click="handleOpenDialog()">新增</el-button>
		</template>
		<el-form slot="query" size="small" inline>
			<el-form-item>
				<el-input v-model="queryData.title" clearable placeholder="课程名称" style="width: 180px"></el-input>
			</el-form-item>
			<el-form-item>
				<el-select v-model="queryData.status" clearable placeholder="发布状态" style="width: 100px">
					<el-option label="暂存" value="0"></el-option>
					<el-option label="待发布" value="2"></el-option>
					<el-option label="已上线" value="1"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" icon="el-icon-search" @click="queryTableData()">查询</el-button>
			</el-form-item>
		</el-form>
		<el-scrollbar class="course_training_body" slot="component">
			<div class="course_training_item" v-for="(item, index) in trainingListData" :key="index">
				<el-image :src="item.courseCover" fit="cover" style="width: 320px; height: 180px"></el-image>
				<div class="intro">
					<h2>{{ item.title }}</h2>
					<el-row :gutter="16">
						<el-col :span="12">
							<strong>建设单位：</strong>
							{{ item.extFiled2 }}
						</el-col>
						<el-col :span="12">
							<strong>课程状态：</strong>
							<el-tag size="small" :type="item.status | courseStatusType">{{ item.status | courseStatusFilter }}</el-tag>
						</el-col>
						<el-col :span="12">
							<strong>创建时间：</strong>
							{{ item.createTime }}
						</el-col>
						<el-col :span="12">
							<strong>上课人数：</strong>
							{{ item.studentNum }}
						</el-col>
					</el-row>
					<div class="button">
						<el-button size="mini" type="success" plain @click="handlePreviewCourse(item)">预览</el-button>
						<el-button size="mini" type="warning" plain @click="handleUpdateCourseStatus(item)">
							<template v-if="item.status === '1'">下架</template>
							<template v-if="item.status === '2'">发布</template>
						</el-button>
						<el-button size="mini" type="danger" plain :disabled="item.status === '1'" @click="handleDeleteCourse(item)">删除</el-button>
						<el-button size="mini" type="primary" @click="handleCourseManage(item)">进入管理</el-button>
					</div>
				</div>
			</div>
		</el-scrollbar>
		<template slot="page">
			<sw-pagination
				:total="dataCount"
				:page.sync="queryData.page"
				:limit.sync="queryData.limit"
				:page-sizes="pageSizes"
				@change="queryTableData()"
			></sw-pagination>
		</template>
		<form-dialog v-model="formDialog" @refresh="queryTableData()"></form-dialog>
	</sw-common-frame>
</template>

<script>
import formDialog from './form';
import { mapGetters } from 'vuex';
import listMixins from '@/mixins/listMixins';
import { queryCoursePageList, updateCourse, deleteCourse } from '@/api/course/sysCourse';
export default {
	mixins: [listMixins],
	components: { formDialog },
	data() {
		return {
			queryData: { page: 1, limit: 5 },
			pageSizes: [5, 10, 20, 50, 100]
		};
	},
	filters: {
		courseStatusType(status) {
			if (status === '0') {
				return 'info';
			} else if (status === '2') {
				return 'warning';
			} else if (status === '1') {
				return 'success';
			}
		},
		courseStatusFilter(status) {
			if (status === '0') {
				return '暂存';
			} else if (status === '2') {
				return '待发布';
			} else if (status === '1') {
				return '已上线';
			}
		}
	},
	computed: {
		...mapGetters(['siteInfo']),
		listFunction() {
			return eval(queryCoursePageList);
		},
		deleteFunction() {
			return eval(deleteCourse);
		},
		requestParams() {
			return { ...this.queryData, courseType: '6', sourceType: '2' };
		},
		updateFunction() {
			return eval(updateCourse);
		},
		trainingListData() {
			return this.tableData.map((item) => {
				let httpUrl = item.sysAttachment?.httpUrl;
				if (!!httpUrl) {
					return { ...item, courseCover: httpUrl.replaceIP() };
				} else if (!!this.siteInfo.defaultCourseImg) {
					return { ...item, courseCover: this.siteInfo.defaultCourseImg };
				} else {
					return { ...item, courseCover: require('@/assets/img/course-cover.jpg') };
				}
			});
		}
	},
	methods: {
		//预览课程
		handlePreviewCourse(data) {
			this.$router.push({ path: `/front/trainingResources/${data.id}` });
		},

		//管理课程
		handleCourseManage(data) {
			this.$router.push({ path: `/admin/train-library/training-library/${data.id}` });
		},

		//删除课程
		handleDeleteCourse(data) {
			let that = this;
			this.$confirm('确定删除该课程吗？', '删除提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
				async beforeClose(action, instance, done) {
					if (action === 'confirm') {
						instance.confirmButtonLoading = true;
						await that.deleteCourseRequest(data.id);
						instance.confirmButtonLoading = false;
						done();
					}
					done();
				}
			}).catch(() => {});
		},

		//删除课程请求
		async deleteCourseRequest(id) {
			let result = await deleteCourse(id).then((res) => res.data);
			if (result.code === '0') {
				this.$message.success('删除成功');
				this.queryTableData();
			}
		},

		//格式化课程状态参数
		formatCourseStatus(data) {
			let params = { id: data.id };
			if (data.status === '1') {
				params['status'] = '2';
				params['operName'] = '下架';
			} else if (data.status === '2') {
				params['status'] = '1';
				params['operName'] = '发布';
			}
			return params;
		},

		//更新课程状态
		handleUpdateCourseStatus(data) {
			let that = this;
			let params = this.formatCourseStatus(data);
			this.$confirm(`确定要${params.operName}该课程吗？`, '更新提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
				async beforeClose(action, instance, done) {
					if (action === 'confirm') {
						instance.confirmButtonLoading = true;
						await that.updateCourseStatusRequest(params);
						instance.confirmButtonLoading = false;
					}
					done();
				}
			}).catch(() => {});
		},

		//更新课程状态请求
		async updateCourseStatusRequest(data) {
			let params = { id: data.id, status: data.status };
			let result = await updateCourse(params).then((res) => res.data);
			if (result.code === '0') {
				this.$message.success('操作成功');
				this.queryTableData();
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.course_training_body::v-deep {
	height: 100%;
	.el-scrollbar__wrap {
		overflow-x: hidden;
	}
}
.course_training_item {
	display: flex;
	padding: 16px;
	margin-top: 16px;
	border-radius: 4px;
	border: 1px solid #ebeef5;
	background-color: #f5f7fa;
	box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
	&:first-child {
		margin-top: 0;
	}
	.intro {
		display: flex;
		flex-direction: column;
		flex: 1;
		h2 {
			font-size: 18px;
			line-height: 1;
			flex-shrink: 0;
			font-weight: bold;
			padding-left: 8px;
			margin-bottom: 10px;
			color: var(--primary);
			border-left: solid 4px var(--primary);
		}
	}
	.el-image {
		margin-right: 16px;
	}
	.el-row {
		flex: 1;
		font-size: 14px;
		line-height: 28px;
		overflow: hidden;
	}
	.el-col {
		display: flex;
		align-items: center;
	}
	.button {
		flex-shrink: 0;
		margin-top: 10px;
	}
}
</style>
